<template>
    <div>
        <!-- 头部区域 -->
        <div class="product-list-header"  ref="listheader">
            <!-- 头部搜索 -->
            <header class="category-header wrap">
                <i class="iconfont icon-left" @click="goBack"></i>
                <div class="header-search">
                    <i class="iconfont icon-search"></i>
                    <input type="text" class="search-title"/>
                </div>
                <i class="iconfont icon-More"></i>
            </header>
            <!-- 排序 -->
            <section class="select-menu">
                <div class="select-item"  :class="{'active':orderBy==='default'}"  @click="selectOrder($event)" data-orderBy="default">默认排序</div>
                <div class="select-item" :class="{'active':orderBy==='price_asc'}"  @click="selectOrder($event)"  data-orderBy="price_asc" >
                    升序
                    <i class="iconfont icon-up1"></i>
                </div>
                <div class="select-item" :class="{'active':orderBy==='price_desc'}"  @click="selectOrder($event)" data-orderBy="price_desc">
                    降序
                    <i class="iconfont icon-down1"></i>
                </div>
                <div class="select-item">
                    筛选
                    <i class="iconfont icon-shaixuan"></i>
                </div>
            </section>
        </div>
        <!-- 商品列表 -->

        <section class="product-list">
            <div class="product-container">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功"  ref="vanlist">
                    <van-list
                       
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                    >
                        <van-card  
                            v-for="(item,index) in productList" 
                            :key="index" 
                            :num="item.stock" 
                            :price="item.price" 
                            :desc="item.subtitle" 
                            :title="item.name" 
                            :thumb="item.imageHost+item.mainImage" 
                            :origin-price="item.originalPrice"
                            @click="goDetail(item.id)"
                           
                            />
                    </van-list>
                </van-pull-refresh>
            </div>
        </section>
    </div>
</template>
<script>
import {getProcuctList} from '@/http/index';
export default {
   data(){
       return{
            // 获取表单传递的参数
            categoryId:this.$route.query.categoryId,
            // 排序规则
            orderBy: 'default',
            // 当前是第几页数据，
            pageNum: 1, 
            // 每次请求多少条数据
            pageSize: 10, 
            // 存放数据的数组
            productList: [],
            //是否处于加载状态（上拖）
            loading:false,
            //是否加载完成
            finished:false,
            //是否处于加载状态中（下拉）
            refreshing: false,
            
       }
   },
   methods:{
        // 返回上一页
        goBack(){
            this.$router.go(-1)
        },
        // 排序高亮
        selectOrder(e){
            let dataOrderBy=e.currentTarget.getAttribute('data-orderBy')         
            if(dataOrderBy===this.orderBy){
                  return
            }
            this.orderBy=dataOrderBy
            this.pageNum = 1
            //参数
            const params = {
                orderBy: this.orderBy,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            };
            this.refreshing=true //是否处于加载状态中（下拉）
            // this.loading=true  //是否处于加载状态（上拖）
            // this.finished=false//是否加载完成
            // console.log( this.finished); 
            this.fetchProductlist(params)
           
          
           this.$refs.vanlist.$el.scrollTop = 0;
        },
        //获取内容数据
        fetchProductlist(params) {
            getProcuctList(params).then(res => {
                //是否处于加载状态（下拉）
                this.loading=false;
                 //数据是否加载完
                if(res.list.length<this.pageSize){
                     //是否加载完成
                     this.finished=true;
                }
                //是否处于加载状态中（下拉）
                if (this.refreshing) {
                    // 下拉刷新赋值新数据
                    this.productList = res.list;
                    //是否处于加载状态中（下拉）
                    this.refreshing = false;
                    //是否加载完成
                    this.finished = false 
                } else {
                    // 上拉加载更多 合并数据
                    this.productList = this.productList.concat(res.list);
                }
            });
        },
        //跳转商品详情
        goDetail(id){
                this.$router.push('/product/' + id)
        },
        //上拖时触发
        onLoad(){
            this.loading=true;
            this.fetchProductlist({ pageSize: this.pageSize, pageNum: this.pageNum++, orderBy: this.orderBy})
        },
        //下拉时触发
        onRefresh(){
            setTimeout(() => {
            this.refreshing=true,
            this.pageNum=1;
            this.fetchProductlist({ pageSize: this.pageSize, pageNum: this.pageNum, orderBy: this.orderBy})
            },500);
        },
        //给内容宽度
        setH(){
            let conH=document.documentElement.clientHeight-document.querySelector('.product-list-header').clientHeight
            // document.querySelector('.van-list').style.height=conH  +'px'
            document.querySelector('.van-pull-refresh').style.height=conH  +'px'
        },
  
    },
   created(){
   },
   mounted(){
       this.setH()
   }
}
</script>
<style lang="scss" scoped>
// 公共样式
@import '../../common/style/mixin';
// 单独样式
@import '../../css/product-list';
</style>